<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAHVF33-uLg8IIF48OLn6xOhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSKIAbD8rs6aF7c7bAAYOaaFcujyA"></script>
    <!--script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAHVF33-uLg8IIF48OLn6xOhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSKIAbD8rs6aF7c7bAAYOaaFcujyA"
      type="text/javascript"></script-->
      
     <%= javascript_include_tag "prototype" %> 
      
      
    <!--script type="text/javascript">

    //<![CDATA[

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
      }
    }

    //]]>
    </script-->
    <script type="text/javascript">
    
    var map; 
    google.load("maps", "2");
   
  // Call this function when the page has been loaded
  function initialize() {
   if (!google.maps.BrowserIsCompatible())
        alert("Navigateur non compatible");
        
    // Set viewport bounds
    //GClientGeocoder(cache?)  
    //GLatLngBounds(sw?,  ne?)
    //setViewport(bounds)
    
    map = new google.maps.Map2(document.getElementById("map"));
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.addControl(new GScaleControl());
    map.addControl(new GOverviewMapControl());

    map.setCenter(new google.maps.LatLng(45.51082, -73.63259), 14);
   /* window.setTimeout(function() {
        map.panTo(new GLatLng(45.49531, -73.63682));
    }, 2000); 
    */
}
  
  function zoomToPoint(lat, lng, id, heure){
    var point = new google.maps.LatLng(lat, lng);
    //var jour = new Date();
    var msg = '<font size="-1">modem id:&nbsp;<strong>' + id + '</strong><br/>' + heure  + '</font>' 
    map.panTo(point);
    map.openInfoWindowHtml(point, msg);
  }
  
  function updatePositions() {
  	//$('position').innerHTML = $('time_1').innerHTML;
  	var positions = eval($('position').innerHTML);
  	zoomToPoint(parseFloat(positions[1]), parseFloat(positions[2]), positions[0], positions[3]);

  }
  
  function changerVehicule(modemId) {
  	$('modem_id').value = modemId;
  }
  
  google.setOnLoadCallback(initialize);
</script>
  </head>
  <body onunload="google.maps.Unload()">
  
    <div id="map" style="width: 600px; height: 400px"></div>
    <br />
    <a href="#" onClick="changerVehicule('03407228127');">V&eacute;hicule A</a>&nbsp;
    <a href="#" onClick="changerVehicule('03407228020');">V&eacute;hicule B</a>&nbsp;
    <a href="#" onClick="changerVehicule('03407228031');">V&eacute;hicule C</a>&nbsp;
	<a href="#" onClick="changerVehicule('05503955094');">V&eacute;hicule D</a>&nbsp;
    
  	<form>
		<%= hidden_field_tag :modem_id %>
	
  
	<div id="position" style="background-color:#eee;display:none;" />
    
	<%= periodically_call_remote(:update => 'position',
									:url => { :action => :get_positions },
									:frequency => 3, :complete => "updatePositions()", :with => "'id=' + encodeURIComponent($F('modem_id'))" )%>
  
  </form>
  </body>
</html>